<template>
  <div class="v-editor-select-multiplicity">
    <MDropdown
      :disabled="row.readonly || isModelDisabled"
      :splitButton="true"
    >
      <template #default>
        <div class="g-jc-sb g-pointer">
          <div class="g-flex-1">
            <!-- {{selectedOption?.label}} -->
            <el-input
              v-model="inputValue"
              class="_input_inputValue"
              focus
              :disabled="row.readonly || isModelDisabled"
              @change="handelchange"
              @command="handelchange"
            ></el-input>
          </div>
          <div
            v-if="selected && !row.readonly && !isModelDisabled"
            class="g-flex-0 g-pd-lr-4"
          >
            <img
              src="statics/icons/app/iconlist2.png"
              @click="handleClick"
            />
          </div>
        </div>
      </template>

      <template #dropdown>
        <MDropdownMenuItem
          v-for="item in options"
          :key="item.value"
          @click="handleClickItem(item)"
        >
          {{ locale.getTByContent(item, item.label, { en: "enLabel", zhCn: "label" }) }}
        </MDropdownMenuItem>
      </template>
    </MDropdown>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, Ref, inject } from "vue";
import { PropertyDropdownOption, PropertyRow } from "../../types";
import { propertyUtil } from "../../PropertyUtil";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { locale } from "@/util/locale";
import { multiplicityItems } from "../common/ValueSpecificationTypes";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 多重性属性设置
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();
// const inputValue = computed(() => {
//   return props.row.value ? props.row.value as string : selectedOption.value!.label ? selectedOption.value?.label : '';
// });
const inputValue = ref<string>(props.row.value as string);

watch(
  () => props.row.value as string,
  newvalue => {
    inputValue.value = newvalue;
  }
);
const options = multiplicityItems;

// const selectedOption = computed(() => {
//   if (props.row.items) {
//     return props.row.items.find(it => it.value === props.row.value);
//   } else {
//     return null;
//   }
// });

function handleClickItem(item: PropertyDropdownOption) {
  //

  // 更新属性是共性行为
  propertyUtil.updatePropertyAndFresh(props.row, item.value);
}

function validateString(str) {
  // 检查是否为单个正整数（无前导零）
  if (/^[0-9]\d*$/.test(str)) {
    return str;
  }

  // 检查是否为 "正整数..正整数" 格式（无前导零）
  const twoPartRegex = /^([1-999]\d*)\.\.([1-999]\d*|\*)$/; // 正确定义捕获组
  const match = str.match(twoPartRegex);
  console.log("match", match);
  if (!match) {
    return false;
  }

  // 关键修复：正确提取捕获组中的两个数字
  const num1 = match[1]; // 第一个捕获组
  const num2 = match[2]; // 第二个捕获组
  if (num2 === "*") {
    return str;
  } else {
    // 调整顺序：确保前者 <= 后者
    return Number(num1) < Number(num2) ? str : `${num2}..${num1}`;
  }
}
function handelchange() {
  console.log("====", validateString(inputValue.value));
  if (validateString(inputValue.value) !== false) {
    inputValue.value = validateString(inputValue.value) as string; // 调换上下限位置显示
    console.log("----", inputValue.value);
    propertyUtil.updatePropertyAndFresh(props.row, inputValue.value);
    // app.$bus.emit(BusEvent.UPDATE_SHAPE, shape);
  } else {
    app.$notify({
      title: "错误",
      type: "error",
      message: "多重性输入有误，请重新输入。"
    });
  }
}
// function handleClick() {
//

// }
const clientY = ref(0);
const handleClick = (target: MouseEvent) => {
  clientY.value = target.clientY;
};
// const placement = computed(() => {
//   if (window.innerHeight - clientY.value - (props.row.items.length + 1) * 20 - 20 < 0) {
//     return "top";
//   } else {
//     return "bottom";
//   }
// });
</script>
